<template>
    <div>
        <div class="goodlist">
            <router-link class="gooditem" :to="'/login/goods/' + this.id" tag="div">
                <img src="" alt="">
                <h1>华为1 (HUAWEI) 荣耀 6Plus             16G双4G版</h1>
                <div class="gooditem_botoom">
                <div class="account">
                    <span class="new">*2195</span>
                    <span class="old">*2499</span>
                </div>
                <p>
                    <span>热卖中</span>
                    <span>剩余60间</span>
                </p>
                </div>
            </router-link>
            <div class="gooditem" @click="info(id)">
                <img src="" alt="">
                <h1>华为 (HUAWEI) 荣耀 6Plus    16G双4G版</h1>
                <div class="gooditem_botoom">
                <div class="account">
                    <span class="new">*2195</span>
                    <span class="old">*2499</span>
                </div>
                <p>
                    <span>热卖中</span>
                    <span>剩余60间</span>
                </p>
                </div>
            </div>
               <div class="gooditem">
                <img src="" alt="">
                <h1>华为 (HUAWEI) 荣耀 6Plus  16G双4G版</h1>
                <div class="gooditem_botoom">
                <p class="account">
                    <span class="new">*2195</span>
                    <span class="old">*2499</span>
                </p>
                <p>
                    <span>热卖中</span>
                    <span>剩余60间</span>
                </p>
                </div>
            </div>
            <div class="gooditem">
                <img src="" alt="">
                <h1>华为 (HUAWEI) 荣耀 6Plus  16G双4G版</h1>
                <div class="gooditem_botoom">
                <div class="account">
                    <span class="new">*2195</span>
                    <span class="old">*2499</span>
                </div>
                <p>
                    <span>热卖中</span>
                    <span>剩余60间</span>
                </p>
                </div>
            </div>
            <div class="gooditem">
                <img src="" alt="">
                <h1>111111111</h1>
                <div class="gooditem_botoom">
                <div class="account">
                    <span class="new">*2195</span>
                    <span class="old">*2499</span>
                </div>
                <p>
                    <span>热卖中</span>
                    <span>剩余60间</span>
                </p>
                </div>
            </div>

            <!-- 下面是如果数据请求到了的写法 -->
             <!-- <div class="gooditem" v-for="item in list" :key="item.id">
                <img :src="item.src_url" alt="">
                <h1>{{item.title}}</h1>
                <div class="gooditem_botoom">
                <div class="account">
                    <span class="new">*{{item.new}}</span>
                    <span class="old">*{{item.old}}</span>
                </div>
                <p>
                    <span>热卖中</span>
                    <span>剩余{{item.account}}间</span>
                </p>
                </div>
            </div> -->
            <mt-button type="danger" size="large" @click="add">加载更多</mt-button>
        </div>
        
    </div>
</template>
<script>
import {Toast} from 'Mint-ui' 
export default {
    // data用来保存从服务端获取到的数据
    data() {
        return {
            list: [],
            pageindex: 1,
            id: 5
        }
    },
    // created写法一定是created() {}
    created() {
        // 表示在页面一加载进来的时候就调用函数
        this.getshow()
    }
    ,
    // 这个方法用来向服务端发送ajax请求获取数据
    methods: {
        getshow() {
            this.$http.get('api/getthemmmmm/' +this.pageindex).then(function(res) {
                // 先进状态判断
                if (res.body.status == 200) {
                    this.list = this.list.concat(res.body.message)
                }
                // else {
                //     Toast('商品获取失败')
                // }
            },function() {
                Toast('商品加载失败')
            })
        },
        // 加载更多
        add() {
            this.pageindex++
            this.getshow()
        },
        // 商品详情
        info(id) {
            // 传统的跳转页面通过  a标签 或者 window.lpaction.href
            // 区分 $route 和$router
            // this.$route 是路由参数对象，所有路由中的参数  ，params ,query 都是属于他
            // this.$router 是路由导航对象  作用是用来实现路由的前进后退
      

                // 编程式导航写法
                // 字符串
                // this.$router.push("/login/goods/" + id);
                // 对象
                // this.$router.push({ path: '/login/goods/' + id  })
                // 命名的路由
                this.$router.push({ name: 'user', params: { userId: id }})

                

        }
    }
}
</script>
<style lang="scss" scoped>
  
    .goodlist {
     
       width: 100%;
        display: flex;
        padding: 0 8px;
        justify-content: space-between;
        flex-wrap: wrap;
        .gooditem {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
            width: 49%;
            border: 1px solid #ccc;
            box-shadow: 0 0 8px #ccc;
            margin: 5px 0;
            padding: 2px;
            img {
                width: 100%;
                height: 200px;
            }
            h1 {
                font-size: 14px;
                margin: 0;
                padding: 0;
              
            }
            .gooditem_botoom {
                
                background-color: #ccc;
                padding: 5px;
               
                .account {
                 
                    .new {
                        color: red;
                        margin-right: 10px;
                        line-height: 25px;
                    }
                    .old {
                        font-size: 12px;
                        text-decoration: line-through;
                        color: #999;
                    }
                }
              p {
                  display: flex;
                 margin: 0;
                justify-content: space-between;
           }
            }

       
        }
    }
    
</style>